import { ECharts, EChartsType } from "echarts";
import { defineComponent, onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { chartProps } from "./types";
export default defineComponent({
  name: "chart-view",
  props: chartProps,
  emits: ["load"],
  setup(_, { emit }) {
    let chart: EChartsType;
    const chartRef = ref();
    const resize = function () {
      // chart.setOption(_.options);
      chart.resize();
    };
    onMounted(() => {
      chart = echarts.init(chartRef.value);
      setTimeout(() => {
        console.log("_.option", _.options);

        chart.setOption(_.options);
      }, 800);
      window.addEventListener("resize", resize);
      emit("load", chart);
    });
    watch(
      () => _.options,

      (newValue: any) => {
        console.log("newValue", newValue);

        chart.setOption(newValue);
      }
    );

    return () => {
      return <div ref={chartRef} class="overflow-hidden" />;
    };
  },
});
